const { defineConfig } = require('@vue/cli-service')
const objExternals = {
  // CDN 的 资源（和vue相关的） 依赖全局变量 Vue， 所以 Vue 也需要使用 CDN 引入
  vue: 'Vue',
  // 属性名称 Vue, 表示遇到 import xxx from 'vue' 这类引入 'vue'的，
  // 不去 node_modules 中找，而是去找 全局变量 Vue
  'vue-router': 'VueRouter',
  axios: 'axios',
  'element-plus': 'ElementPlus',
  BMap: 'BMap',
  echarts: 'echarts',
  'echarts-gl': 'echartsGl',
}

// 压缩的
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const isProdOrTest = process.env.NODE_ENV !== 'development'
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  productionSourceMap: false, // 设为false，既可以减少包大小，也可以加密源码
  configureWebpack: {
    //判断在生产环境就使用cdn, 看个人项目情况
    // 这句话是否判断处于生产环境 如果是生产环境的就使用cdn加速
    // externals: process.env.VUE_APP_STAGE === 'LOCAL' ? {} : objExternals
    externals: objExternals,
  },
  //  图片压缩
  chainWebpack (config) {
    config.plugins.delete('prefetch') //默认开启prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能模块
    if (isProdOrTest) {
      // 对超过10kb的文件gzip压缩
      config.plugin('compressionPlugin').use(
        new CompressionWebpackPlugin({
          test: /\.(js|css|html)$/, // 匹配文件名
          threshold: 10240,
        })
      )
    }
  },
})
